<template>
  <div class="recommend">
    <header-nav />
    <!-- 轮播图 -->
    <div class="box">
      <div class="banner">
        <div class="imgs">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imgs" :key="index">
              <img :src="item.pic" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 推荐歌单 -->
      <div class="remLists">
        <div class="title">推荐歌单</div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in songList" :key="index">
              <div class="img">
                <img
                  v-lazy="item.picUrl"
                  @click="$router.push(`/recommend/detail/${item.id}`)"
                />
              </div>
              <p>{{ item.name }}</p>
              <span
                ><i class="iconfont icon-erji"></i
                >{{ parseInt(item.playCount / 10000) }}万</span
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 推荐视频 -->
      <div class="remVideos">
        <div class="title">最新MV</div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in videoList" :key="index">
              <div class="img">
                <img
                  v-lazy="item.cover"
                  @click="$router.push(`/recommend/video/${item.id}`)"
                />
              </div>
              <p>{{ item.name }}</p>
              <span
                ><i class="iconfont icon-bofang"></i
                >{{ parseInt(item.playCount / 10000) }}万
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getPersonalizedr } from "@/api/recommend";
import { getVideo } from "@/api/mv";

export default {
  data() {
    return {
      imgs: null,
      songList: [],
      videoList: [],
    };
  },
  created() {
    this.getBanner();
    this.getPersonalizedr();
    this.getVideo();
  },
  methods: {
    // 获取轮播图数据
    async getBanner() {
      const { banners } = await getBanner();
      this.imgs = banners;
    },
    //获取推荐歌单
    async getPersonalizedr() {
      const { result } = await getPersonalizedr();
      console.log(result);
      this.songList = result;
    },
    //获取推荐mv
    async getVideo() {
      const { data } = await getVideo();
      console.log("视频", data);
      this.videoList = data;
    },
  },
};
</script>

<style lang="less">
.recommend {
  height: 100vh;
  background: url("../assets/bg.webp") no-repeat;
  background-size: 100%;

  .box {
    height: 88vh;
    padding-bottom: 5vh;
    overflow-x: hidden;
    .banner {
      &::before {
        content: "";
        display: block;
        height: 124px;
        position: absolute;
        width: 100%;
        z-index: -1;
      }
      position: relative;
      .imgs {
        position: relative;
        left: 0px;
        right: 0px;
        top: 0px;
        margin: auto;
        width: 96%;
        border-radius: 4px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .remLists {
      margin: 0 10px;
      .title {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        font-weight: bold;
      }
      .content {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          li {
            flex: 0 0 32%;
            position: relative;
            span {
              position: absolute;
              top: 0px;
              right: 0px;
              color: #fff;
              font-size: 10px;
              i {
                font-size: 15px;
                vertical-align: middle;
              }
            }
            .img {
              background-color: aqua;
              min-height: 50px;
              width: 100%;
              border-radius: 3px;
              img {
                width: 100%;
                border-radius: 3px;
              }
            }
            p {
              font-size: 12px;
              color: #565658;
              line-height: 15px;
              padding: 5px;
              font-weight: 600;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .remVideos {
      margin: 0 10px;
      .title {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        font-weight: bold;
      }
      .content {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          li {
            flex: 0 0 32%;
            position: relative;
            span {
              position: absolute;
              top: 0px;
              right: 5px;
              color: #fff;
              font-size: 10px;
              i {
                margin-right: 1px;
                font-size: 9px;
                vertical-align: middle;
              }
            }
            .img {
              background-color: aqua;
              width: 100%;
              border-radius: 3px;
              img {
                width: 46vw;
                height: 15vh;
                border-radius: 3px;
              }
            }
            p {
              font-size: 12px;
              color: #565658;
              line-height: 15px;
              padding: 5px;
              margin-bottom: 10px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
</style>
